<template>
	<view class="page">
		<u--form labelPosition="top" :model="form" :rules="rules" labelWidth="150rpx" ref="formRef">
			<u-form-item class="formInput" label="品牌" prop="vehicleBrand" @click="vehicleBrandShow = true">
				<u--input border="none" v-model="form.vehicleBrand" placeholder="请选择品牌"></u--input>
			</u-form-item>
			
			<u-form-item class="formInput" label="型号" prop="vehicleModel">
				<u--input border="none" v-model="form.vehicleModel" @click="vehicleModelShow = true" placeholder="请选择型号"></u--input>
			</u-form-item>
			
			<u-form-item class="formInput" label="车架号" prop ="frameNumberInformation">
				<u--input border="none" v-model="form.frameNumberInformation" placeholder="请输入车架号"></u--input>
			</u-form-item>
			
			<u-form-item class="formInput" label="发动机号" prop="engineNumber">
				<u--input border="none" v-model="form.engineNumber" placeholder="请输入发动机号"></u--input>
			</u-form-item>
			
			<u-form-item class="formInput" label="车牌号" prop="licencePlate">
				<u--input border="none" v-model="form.licencePlate" placeholder="请输入车牌号"></u--input>
			</u-form-item>
		</u--form>
		
		<view class="carImgTitle">请上传车辆图片</view>
		<u-upload
			class="upload"
			:fileList="form.carIdImg"
			@afterRead="afterRead"
			name="6"
			multiple
			:maxCount="1"
			width="250"
			height="150"
		>
			<view class="carImage" v-show="carImg == ''">
				<view>
					<u-icon class="icon" name="plus" size="80" color="#DCDCDC"></u-icon>
				</view>
				
				<view>点击添加汽车图片</view>
			</view>
			
			<view v-show="carImg != ''" class="carImg">
				<image style="width: 660rpx;height:500rpx;margin: 20rpx 0 0 50rpx;" :src="carImg"></image>
			</view>
		</u-upload>
		
		<view class="switch flex">
			<view>设为默认车辆</view>
			<u-switch v-model="form.switchValue" size='30'></u-switch> 
		</view>
		
		 <view>
			 <u-button class="btn u-margin-20" @click="Vehicle">完成</u-button>
		 </view>
		 
		 <u-picker 
		 :show="vehicleBrandShow" 
		 :columns="[BrandListDate]" 
		 keyName="vehicleBrandModel"
		 closeOnClickOverlay
		 @cancel="vehicleBrandShow=false"
		 @close="vehicleBrandShow=false"
		 @confirm="vehicleBrandConfirm"
		 >
		 </u-picker>
		 
		 <u-picker
		 :show="vehicleModelShow" 
		 :columns="[vehicleModelDate]" 
		 keyName="vehicleBrandModel"
		 closeOnClickOverlay
		 @cancel="vehicleModelShow=false"
		 @close="vehicleModelShow=false"
		 @confirm="vehicleModelConfirm"
		 >
		 </u-picker>
		 
		 <u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import {brandList,addVehicle} from '@/config/api/car.js'
	export default{
		data() {
			return{
				form:{
					carIdImg:[],
					file:"",
					
					vehicleBrand:"",
					vehicleModel:"",
					frameNumberInformation:"",
					engineNumber:"",
					licencePlate:"",
					vehicleModelId:"",
					vehicleBrandId:"",
					
					
					switchValue:false,
				},
				
				rules:{
					vehicleBrand:[
						{
							required:true,
							message:"请选择品牌",
							trigger: ['change']
						}
					],
					vehicleModel:[
						{
							required:true,
							message:"请选择型号",
							trigger: ['change']
						}
					],
					frameNumberInformation:[
						{
							required:true,
							message:"请选择车架号",
							trigger: ['blur', 'change']
						}
					],
					engineNumber:[
						{
							required:true,
							message:"请选择发动机号",
							trigger: ['blur', 'change']
						}
					],
					licencePlate:[
						{
							required:true,
							message:"请选择车牌号",
							trigger: ['blur', 'change']
						},
						{
							
							pattern: /^(京|津|沪|渝|冀|豫|云|辽|黑|湘|皖|鲁|新|苏|浙|赣|鄂|桂|甘|晋|蒙|陕|吉|闽|贵|粤|青|藏|川|宁|琼)[A-HJ-NP-Z]{1}[0-9]{5,6}$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '车牌信息不合法',
							trigger: ['blur', 'change']
						}
					]
				},
				
				// 品牌数据
				BrandListDate:[],
				
				// 型号数据
				vehicleModelDate:[],
				
				// 品牌弹窗
				vehicleBrandShow:false,
				
				// 型号弹窗
				vehicleModelShow:false,
				
				imgUrl:uni.$u.http.config.baseURL,
				
				carImg:""
			}
		},
		
		computed:{
			postForm(){
				return {
					vehicleBrandId:this.form.vehicleBrandId,
					vehicleModelId:this.form.vehicleModelId,
					frameNumberInformation:this.form.frameNumberInformation,
					engineNumber:this.form.engineNumber,
					licencePlate:this.form.licencePlate,
					image:this.form.file,
					selectedState:this.form.switchValue == false?'0':'1'
				}
			}
		},
		methods:{
			afterRead(event){
				let lists = [].concat(event.file)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				this.uploadFilePromise(lists[0].url)
			},
			
			uploadFilePromise(url) {
				let a = uni.uploadFile({
					url: this.imgUrl+'/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					header:{
						'Authorization':uni.getStorageSync("token")
					},
					success: (res) => {
							let fileName = JSON.parse(res.data).fileName
							console.log(fileName);
						setTimeout(() => {
							this.carImg = url
							this.form.file = fileName
							// resolve(res.data.data)
						}, 1000)
					}
				});
			},
			
			getBrandList(){
				brandList().then(res=>{
					this.BrandListDate = res.rows
				})
			},
			
			// 品牌确认
			vehicleBrandConfirm(e){
				this.form.vehicleBrand = e.value[0].vehicleBrandModel
				this.form.vehicleBrandId = e.value[0].id
				this.vehicleModelDate =  e.value[0].modelList
				this.vehicleBrandShow = false
			},
			
			// 型号确认
			vehicleModelConfirm(e){
				console.log(e);
				this.form.vehicleModel = e.value[0].vehicleBrandModel
				this.form.vehicleModelId = e.value[0].id
				this.vehicleModelShow = false
			},
			
			Vehicle(){
				this.$refs.formRef.validate()
				.then(res=>{
					addVehicle(this.postForm).then(res=>{
						if(res.code == 200){
							this.$refs.uToasts.show({
								message:"绑定成功!"
							})			
						}
						
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/home/home"
							})
						},2000)
					})
				})
				.catch(res=>{
					this.$refs.uToasts.show({
						message:"校验失败!"
					})		
				})
				
			}
		},
		onLoad(res){
			this.getBrandList()
		}
	}
</script>

<style scoped>
	.page{
		padding: 20rpx 3%;
	}
	.upload{
		width: 100%;
		height: 600rpx;
		text-align: center;
	}
	.carImage{
		text-align: center;
		padding: 20rpx;
		height: 400rpx;
		border: 2rpx solid #adadad;
		font-size: 60rpx;
		color: #adadad;
		margin: 50rpx %;
	}
	
	.icon{
		margin: 100rpx 280rpx 0 280rpx;
	}
	
	.form{
		padding: 10rpx 20rpx;
	}
	
	.input{
		margin: 30rpx 0;
		border-bottom: 2rpx solid #adadad;
	}

	.formInput{
		margin-top: 30rpx;
		border-bottom: 2rpx solid #ccc;
	}
	
	.switch{
		/* font-size: 24rpx; */
		align-items: center;
		justify-content: space-between;
	}
	
	.btn{
		background-color: #2979FF;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
		color: white;
	}
	
	.carImgTitle{
		margin: 20rpx 0;
	}
</style>
